<!-- 导航 -->
<template>
  <div>
    <div class="am-g tpl-g">
      <!-- 头部 -->
      <header class="tpl-header" :style="{ paddingLeft: !isCollapse ? '160px' : '0px' }">
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
          <!-- 侧边切换 -->
          <div
            class="am-fl tpl-header-button switch-button"
            @click="isCollapse = !isCollapse"
          >
            <i
              class="iconfont icon-menufold"
              :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
            ></i>
          </div>
          <!-- 刷新页面 -->
          <div class="am-fl tpl-header-button refresh-button" @click="refresh">
            <i class="iconfont icon-refresh el-icon-refresh-right"></i>
          </div>
          <!-- 其它功能-->
          <div class="am-fr tpl-header-navbar">
            <ul>
              <!-- 欢迎语 -->
              <li class="am-text-sm tpl-header-navbar-welcome">
                <a href="javascript:void(0)"
                  >欢迎你，<span>{{ name }}</span>
                </a>
              </li>
              <!-- 退出 -->
              <li class="am-text-sm">
                <a href="javascript:void(0)" @click="logout">
                  <i class="iconfont el-icon-switch-button"></i> 退出
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>
      <div id="home" class="flex">
        <div class="left-menu" :style="{ left: !isCollapse ? '0' : '-180px' }">
          <li class="sidebar-nav-heading">渠道运营平台</li>
          <!-- 导航栏-->
          <el-menu
            class="el-menu-vertical-demo"
            text-color="#666666"
            active-text-color="#D2A166"
            :unique-opened="true"
            background-color="#20222a"
            router
            :default-active="onRoutes"
          >
            <div v-for="(menu, index) in menuList" :key="index">
              <el-menu-item :index="menu.route_path" v-if="!menu.childrent" class="alone">
                <template>
                  <span :class="'card-icon iconfont icon-' + menu.route_icon"></span>
                  <span class="ml-10">{{ menu.name }}</span>
                </template>
              </el-menu-item>
              <!-- 下拉目录 -->
              <el-submenu :index="menu.route_path" v-else>
                <template slot="title">
                  <span :class="'card-icon iconfont icon-' + menu.route_icon"></span>
                  <span class="ml-10">{{ menu.name }}</span>
                </template>
                <el-menu-item-group>
                  <div v-for="(menuChild, menuIndex) in menu.childrent" :key="menuIndex">
                    <!-- type === 'select' 三级目录使用下拉导航 -->
                    <el-submenu :index="menuChild.route_path" v-if="menuChild.childrent">
                      <template slot="title">
                        <span
                          class="ml-10"
                          :class="menuChild.childrent ? 'select' : ''"
                          >{{ menuChild.name }}</span
                        >
                      </template>
                      <el-menu-item-group
                        :class="menuChild.childrent ? 'select-children' : ''"
                        v-for="(item, itemIndex) in menuChild.childrent"
                        :key="itemIndex"
                      >
                        <el-menu-item :index="item.route_path" class="ml-10">{{
                          item.name
                        }}</el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                    <!-- 二级目录 -->
                    <el-menu-item
                      :index="menuChild.route_path"
                      v-else
                      class="fz-13 two"
                      style="padding-left: 43px !important"
                      >{{ menuChild.name }}</el-menu-item
                    >
                  </div>
                </el-menu-item-group>
              </el-submenu>
            </div>
          </el-menu>
        </div>

        <div
          class="content-container flex-1"
          :style="{
            marginLeft: !isCollapse ? '164px' : '0px',
            minWidth: $route.path != '/home' ? '' : '880px !important',
          }"
        >
          <div :class="$route.path != '/home' ? 'router-box' : 'home-box'">
            <div v-loading="globalLoading">
              <router-view style="margin:10px"></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/static/style/amazeui.scss";
import "@/static/style/menuIndex.scss";
// 导航列表
import { mapState } from "vuex";
export default {
  name: "menuIndex",

  data() {
    return {
      isCollapse: false,
      name: sessionStorage.getItem("name"),
      // menuList: JSON.parse(sessionStorage.getItem("menu")),
      menuList: [
        {
          name: "首页",
          route_icon: "shouye",
          route_name: "home",
          route_path: "/home",
          type: "select",
        },
        {
          name: "用户管理",
          route_icon: "usermanagement",
          route_name: "usermanagement",
          route_path: "/management",
          type: "select",
          childrent: [
            {
              name: "用户列表",
              route_name: "managementList",
              route_path: "/management/managementList",
              type: "select",
            },
            {
              name: "用户等级",
              route_name: "managementLevel",
              route_path: "/management/managementLevel",
              type: "select",
            },
            {
              name: "子账户列表",
              route_name: "managementItemlist",
              route_path: "/management/managementItemlist",
              type: "select",
            },
          ],
        },
        {
          name: "教程管理",
          route_icon: "course-icon",
          route_name: "course",
          route_path: "/course",
          type: "select",
          childrent: [
            {
              name: "教程列表",
              route_name: "courseList",
              route_path: "/course/courseList",
              type: "select",
            },
          ],
        },
        {
          name: "系统管理",
          route_icon: "system-icon",
          route_name: "system",
          route_path: "/system",
          type: "select",
          childrent: [
            {
              name: "系统列表",
              route_name: "systemList",
              route_path: "/system/systemList",
              type: "select",
            },
          
          ],
        }
      ],
      isCollapse: false,
      userName: sessionStorage.getItem("name"),
    };
  },

  computed: {
    ...mapState(["globalLoading"]),
    onRoutes() {
      return this.$route.path;
    },
  },
  methods: {
    logout() {
      this.$message.success("退出成功");
      setTimeout(() => {
        sessionStorage.clear();
        this.$router.push({
          name: "login",
        });
      }, 400);
    },
    refresh() {
      location.reload();
    },
  },
};
</script>
